<script src="../../main.js"></script>
<template>
    <div>
         <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-people"></i> APP用户管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button
                        type="primary"
                        icon="el-icon-lx-roundadd"
                        class="handle-del mr10"
                        @click="addItem"
                        v-if="globalPermission.customer.edit"
                >创建官方账号</el-button>
                <el-input v-model="query.userName" placeholder="手机号" class="handle-input mr10"></el-input>
                <el-input v-model="query.nickName" placeholder="昵称" class="handle-input mr10"></el-input>
                <el-select v-model="query.status" placeholder="状态" class="handle-input mr10">
                            <el-option
                                    v-for="item in statusOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                <el-button type="primary" icon="el-icon-search"  @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column prop="nickName" label="昵称" align="center"></el-table-column>
                <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
                <el-table-column label="性别" width="60px" align="center">
                    <template slot-scope="scope">
                        <el-tag
                                :type="scope.row.gender===0?'success':(scope.row.gender===1?'danger':'')"
                        >{{scope.row.gender==0?"女":"男"}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="goldcoin" width="80px" label="金币数" align="center"></el-table-column>
                <el-table-column label="直播" width="65px" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.live===1?'success':(scope.row.live===1?'danger':'')"
                        >{{scope.row.live==0?"禁止":"允许"}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="发帖" width="65px" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.post===1?'success':(scope.row.post===1?'danger':'')"
                        >{{scope.row.post==0?"禁止":"允许"}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="official" label="身份" width="80px" align="center"></el-table-column>
                <el-table-column label="VIP" width="60px" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.vip===0?'success':(scope.row.vip===1?'danger':'')"
                        >{{scope.row.vip==0?"否":"是"}}
                        </el-tag>
                    </template>
                </el-table-column>
               <el-table-column label="发帖收益" width="80px" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-lx-attention"
                                @click="handleArticleManager(scope.row.id)"
                        >查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="充值详情" width="80px" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-lx-attention"
                                @click="handleRecharge(scope.row.id)"
                        >查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="消费记录" width="80px" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-lx-attention"
                                @click="handlePurchase(scope.row.id)"
                        >查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="邀请记录" width="80px" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-lx-attention"
                                @click="handleYaoQing(scope.row.id)"
                        >查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="createdTime" label="注册时间" width="100px" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.row.id, scope.row)"
                                v-if="globalPermission.customer.edit"
                        >编辑
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEditPWD(scope.row.id, scope.row)"
                                v-if="globalPermission.customer.edit"
                        >重置密码
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdateLive(scope.row.id, scope.row)"
                                v-if="globalPermission.customer.edit && scope.row.live==0"
                        >允许直播
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdateLive(scope.row.id, scope.row)"
                                v-if="globalPermission.customer.edit && scope.row.live==1"
                        >禁止直播
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdatePost(scope.row.id, scope.row)"
                                v-if="globalPermission.customer.edit  && scope.row.post==1 "
                        >禁止发帖
                        </el-button>
                       <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdatePost(scope.row.id, scope.row)"
                                v-if="globalPermission.customer.edit  && scope.row.post==0 "
                        >允许发帖
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑重置密码弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="新密码">
                    <el-input v-model="form.pwd"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑新增用户弹出框 -->
        <el-dialog title="创建|更新账户" :visible.sync="addVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="昵称">
                    <el-input v-model="form.nickName"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.gender">
                        <el-radio :label="0">女</el-radio>
                        <el-radio :label="1">男</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否VIP">
                    <el-radio-group v-model="form.vip">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="VIP过期" v-if="form.vip==1">
                    <template>
                        <el-date-picker size="small" v-model="form.vipEndTime"
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </template>
                </el-form-item>
                <el-form-item label="密码" v-if="!isCurEdit" >
                    <el-input v-model="form.pwd"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="addEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 查看用户发帖数 -->
        <el-dialog title="帖子列表" :visible.sync="listArticleVisible" >
            <span style="color:#F00" id="span_id">
            </span>
            <el-table
                    :data="tableItemData"
                    border
                    height="400"
                    class="table"
                    header-cell-class-name="table-header"
            >
                <el-table-column prop="id" label="帖子id" width="70px" align="center"></el-table-column>
                <el-table-column prop="title" show-overflow-tooltip label="帖子标题" align="center"></el-table-column>
                <el-table-column prop="artType" width="70px" label="类型" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.artType==1" >视频</el-tag>
                        <el-tag v-if="scope.row.artType==3" >图文</el-tag>
                        <el-tag v-if="scope.row.artType==4" >影片</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="profit" width="80px" label="金币收益" align="center"></el-table-column>
                <el-table-column prop="payNum" width="80px" label="付费人数" align="center"></el-table-column>
                <el-table-column prop="createdTime" width="160px" label="发帖时间" align="center"></el-table-column>
                <el-table-column prop="deleted"  width="80px" label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.deleted==0" type="info">上架</el-tag>
                        <el-tag v-if="scope.row.deleted==1" type="warning">下架</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!-- 查看用户充值提现记录 -->
        <el-dialog title="充值|提现 列表" :visible.sync="listRechargeVisible" >
            <span style="color:#F00" id="span_id">
            </span>
            <el-table
                    :data="tableItemData"
                    border
                    height="400"
                    class="table"
                    header-cell-class-name="table-header"
            >
                <el-table-column prop="orderNo" label="订单号" width="70px" align="center"></el-table-column>
                <el-table-column prop="amount"  label="支付金额(圆)" align="center"></el-table-column>
                <el-table-column prop="goldcoin" label="到账金币(个)" align="center"></el-table-column>
                <el-table-column prop="buyType" width="100px" align="center" label="类型">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.buyType==0" >充值</el-tag>
                        <el-tag v-if="scope.row.buyType==1" >提现</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="buySource" width="120px" label="渠道" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.buySource==0" >微信</el-tag>
                        <el-tag v-if="scope.row.buySource==1" >支付宝</el-tag>
                        <el-tag v-if="scope.row.buySource==2" >银行卡</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createdTime" width="160px" label="时间" align="center"></el-table-column>
            </el-table>
        </el-dialog>

        <!-- 查看用户消费记录 -->
        <el-dialog title="消费购买列表" :visible.sync="listPurchaseVisible" >
            <span style="color:#F00" id="span_id">
            </span>
            <el-table
                    :data="tableItemData"
                    border
                    height="400"
                    class="table"
                    header-cell-class-name="table-header"
            >
                <el-table-column prop="goldcoin"  label="支付金币(个)" align="center"></el-table-column>
                <el-table-column prop="buyType" width="100px" align="center" label="类型">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.buyType==0" >购买帖子</el-tag>
                        <el-tag v-if="scope.row.buyType==1" >购买VIP</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="msg"  label="帖子标题" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column prop="createdTime" width="160px" label="时间" align="center"></el-table-column>
            </el-table>
        </el-dialog>

        <!-- 查看用户邀请记录 -->
        <el-dialog title="消费购买列表" :visible.sync="listYaoQingVisible" >
            <span style="color:#F00" id="span_id">
            </span>
            <el-table
                    :data="tableItemData"
                    border
                    height="400"
                    class="table"
                    header-cell-class-name="table-header"
            >
                <el-table-column prop="id"  label="用户id" align="center"></el-table-column>
                <el-table-column prop="nickName"  label="昵称" align="center"></el-table-column>
                <el-table-column prop="live" width="100px" align="center" label="能否直播">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.live==0" >禁止</el-tag>
                        <el-tag v-if="scope.row.live==1" >允许</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="post" width="100px" align="center" label="能否发帖">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.post==0" >禁止</el-tag>
                        <el-tag v-if="scope.row.post==1" >允许</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createdTime" width="160px" label="时间" align="center"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
    import {getAllItem,getAll,editPwd,addCusRequest,updateStatus} from '../../api/customer';
    var queryRequest = {url: "/manager/customer/getUsers"};
    var queryItemRequest = {url: "/manager/article/myArticle"};
    var rechargeItemRequest = {url: "/manager/recharge/getAll"};
    var userItemRequest = {url: "/manager/customer/getInviteUsers"};
    var purchaseItemRequest = {url: "/manager/recharge/purchaseList"};
    var editRequest = {url:"/manager/customer/updatePwd"};
    var addRequest = {url:"/manager/customer/createCustomer"};
    var updatePostStatus={url:"/manager/customer/updatePostStatus"};
    var updateLiveStatus={url:"/manager/customer/updateLiveStatus"};
    export default {
        name: 'usertable',
        data() {
            return {
                query: {
                    phone: '',
                    userName: '',
                    pageNum: 1,
                    pageSize: 10,
                },
                statusOptions: [{
                        value: '0',
                        label: '注册用户'
                    }, {
                        value: '1',
                        label: '官方账号'
                    }, {
                        value: '2',
                        label: '游客'
                    },{
                        value: '',
                        label: '全部用户'
                    }
                ],
                statusQuery:{
                    id:'',
                    status
                },
                listArticleVisible:false,
                listRechargeVisible:false,
                listPurchaseVisible:false,
                listYaoQingVisible:false,
                globalPermission: this.getPermission(),
                getToken:{'auth-token':localStorage.getItem('token')},
                tableData: [],
                imageVisible:false,
                multipleSelection: [],
                tableItemData: [],
                editVisible: false,
                addVisible: false,
                editRolesVisible: false,
                statusVisible:false,
                formIdShow: false,
                pageTotal: 0,
                form: {},
                statusForm:{},
                idx: -1,
                id: -1,
                isCurEdit:false,
            };
        },
        created() {
            queryRequest.data = this.query;
            this.getData();
        },
        methods: {
            // 获取数据
            getData() {
                //获取用户列表
                getAll(queryRequest).then(res => {
                    this.tableData = res.data.list;
                    this.pageTotal = res.data.total;
                });
            },
            // 新增
            addItem() {
                this.form={};
                this.addVisible = true;
                this.isCurEdit = false;
            },
            clean(){
                this.editVisible=false;
                this.addVisible=false;
                this.handleSearch();
            },
            getPermission() {
                return JSON.parse(sessionStorage.getItem("permission"));
            },

            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageNum', 1);
                this.getData();
            },
            // 编辑操作
            handleEditPWD(id, row) {
                this.id = id;
                this.form = row;
                this.form.id = this.id;
                this.editVisible = true;
                this.isCurEdit = true;
            },
            // 编辑操作
            handleEdit(id, row) {
                this.id = id;
                this.form = row;
                this.form.id = this.id;
                this.addVisible = true;
                this.isCurEdit = true;
            },
            //查看发帖数
            handleArticleManager(uid) {
                this.editVisible = false;
                //获取新闻列表
                queryItemRequest.data ={
                    uid: uid,
                    pageNum: 1,
                    pageSize: 10000
                };
                getAllItem(queryItemRequest).then(res => {
                    this.tableItemData = res.data.list;
                    //document.getElementById('span_id').innerText="帖子总数："+res.data.total;
                });
                this.listArticleVisible = true;
            },
             //查看充值提现
            handleRecharge(uid) {
                this.editVisible = false;
                //获取新闻列表
                rechargeItemRequest.data ={
                    uid: uid,
                    pageNum: 1,
                    pageSize: 10000
                };
                this.itemId = 8;
                getAllItem(rechargeItemRequest).then(res => {
                    this.tableItemData = res.data.list;
                });
                this.listRechargeVisible = true;
            },
            //查看消费记录
            handlePurchase(uid) {
                this.editVisible = false;
                //获取新闻列表
                purchaseItemRequest.data ={
                    uid: uid,
                    pageNum: 1,
                    pageSize: 10000
                };
                this.itemId = 8;
                getAllItem(purchaseItemRequest).then(res => {
                    this.tableItemData = res.data.list;
                });
                this.listPurchaseVisible = true;
            },
            //查看邀请记录
            handleYaoQing(uid) {
                this.editVisible = false;
                //获取新闻列表
                userItemRequest.data ={
                    uid: uid,
                    pageNum: 1,
                    pageSize: 10000
                };
                this.itemId = 8;
                getAllItem(userItemRequest).then(res => {
                    this.tableItemData = res.data.list;
                });
                this.listYaoQingVisible = true;
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //允许禁止直播
            handleUpdateLive(id, row) {
                this.$confirm('确定要更改用户直播权限吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    var status = 0;
                    if(row.live==0){
                        status = 1;
                    }
                    this.statusQuery.id=row.id;
                    this.statusQuery.status=status;
                    updateLiveStatus.data = this.statusQuery;
                    updateStatus(updateLiveStatus).then(res => {
                        if (res.code == 0) {
                            this.$message.success(`成功`);
                            this.handleSearch();
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                    //this.tableData.splice(index, 1);
                }).catch(() => {
                });
            },
            //允许禁止发帖
            handleUpdatePost(id, row) {
                this.$confirm('确定更改用户发帖权限吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    var status = 0;
                    if(row.post==0){
                        status = 1;
                    }
                    this.statusQuery.id=row.id;
                    this.statusQuery.status=status;
                    updatePostStatus.data = this.statusQuery;
                    updateStatus(updatePostStatus).then(res => {
                        if (res.code == 0) {
                            this.$message.success(`成功`);
                            this.handleSearch();
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                    //this.tableData.splice(index, 1);
                }).catch(() => {
                });
            },

            // 重置密码
            saveEdit() {
                this.form.id = this.id;
                editRequest.data = this.form;
                editPwd(editRequest).then(res => {
                    if (res.code == 0) {
                        this.$message.success(`修改成功`);
                        this.editVisible = false;
                        this.handleSearch();
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            // 创建用户
            addEdit() {
                this.form.id = this.id;
                addRequest.data = this.form;
                addCusRequest(addRequest).then(res => {
                    if (res.code == 0) {
                        this.$message.success(`成功`);
                        this.addVisible = false;
                        this.handleSearch();
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageNum', val);
                this.getData();
            },
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 130px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .show {
        display: block;
    }

    .hide {
        display: none;
    }

    .checkbox-rows {
        width: 130px;
        margin-top: 10px;
    }

    .el-table-filter {
        max-height: 300px;
        overflow: auto;
    }

    .el-checkbox.is-bordered + .el-checkbox.is-bordered {
        margin-left: 0px;
    }

</style>
